<template>
  <div class="ZYF-technical">
    <div class="video_box" id="operator" v-show="this.videoUrl">
      <video ref="videoPlayer" class="video-js" poster="@/assets/mp4.png"></video>
    </div>
    <div class="technical-top">
      <h3 class="h3">技术讨论浏览</h3>
    </div>

    <div class="technical-bottom">
      <div class="video-box__left">
        <div class="article-list__box">
          <div class="article-title">
            <span class="border-text">最新资源</span>
            <span style="font-weight: 600;cursor: pointer" @click="lookMore">查看更多</span>
          </div>
          <ul class="article-father">
            <li
              class="acticle-child"
              v-for="(item, index) in newDataI"
              @click="getDetail(item)"
              :key="index"
            >
              <div class="img-box">
                <img :src="item.fileUrl" alt />
                <div class="resources-title">{{ item.title }}</div>
              </div>
              <div class="resources-bottom">
                <span>
                  <a-icon type="eye" />
                  {{ item.views }}
                </span>
                <span>{{ item.nickname }} 发布于：{{ item.releaseTime }}</span>
              </div>
            </li>
          </ul>
        </div>
        <div class="video-list__box">
          <div class="article-title">
            <span class="border-text">最新视频</span>
            <span style="font-weight: 600;cursor: pointer" @click="lookMoreV">查看更多</span
            >
          </div>
          <ul class="article-father">
            <li class="acticle-child" v-for="(item, index) in newDataV" @click="getDetail(item)" :key="index">
              <div class="img-box">
                <img :src="item.fileUrl" alt />
                <div class="resources-title">{{ item.title }}</div>
              </div>
              <div class="resources-bottom">
                <span>
                  <a-icon type="eye" />
                  {{ item.views }}
                </span>
                <span>{{ item.nickname }} 发布于：{{ item.releaseTime }}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="list-box__right">
        <div class="article-title">
          <span class="border-text">最热资源</span>
        </div>
        <ul class="ul-class">
          <li class="li-child" v-for="(item, i) in hotdata" :key="i" @click="getDetail(item)">
            <div class="tubiao">{{ i + 1 }}</div>
            <span>{{ item.title }}</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- //详情弹框 -->
    <a-modal v-model="detailPop" width="50%" :title="title" centered @cancel="delLisst" :maskClosable="false" :footer="null">
      <div>
        <a-form class="pollutionForm" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
          <a-row>
            <a-col :span="12" pull="1">
              <a-form-item label="上传人:">
                <span style="font-size: 18px">{{detail.nickname }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="通过时间">
                <span style="font-size: 18px">{{detail.releaseTime }}</span>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24" pull="6">
              <a-form-item label="描述">
                <span style="font-size: 18px">{{detail.content }}</span>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24" pull="6">
              <a-form-item label="文件信息"></a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="4"></a-col>
            <a-col :span="20">
              <div class="up-box">
                <div v-viewer>
                  <img v-for="(item, i) in imgsList" :key="i" :src="item.fileUrl" alt/>
                </div>
                <div>
                  <img style="width: auto; height: auto" v-for="(item, i) in videosList" :key="i" src="@/assets/mp4.png" @click="videoImg(item)" alt/>
                </div>
                <div style="margin: 10px 0" v-for="(item, i) in filesList" :key="i">
                  <a class="infoDown" :href="item.fileUrl" target="_blank">
                    <span>{{ item.fileName }}</span>
                    <span>下载<a-icon class="ddicon" type="download" /></span>
                  </a>
                </div>
              </div>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script>
import "viewerjs/dist/viewer.css";
import Viewer from "v-viewer";
import Vue from "vue";
Vue.use(Viewer);
import moment from "moment";
import "moment/locale/zh-cn";
import videojs from "video.js";
import "video.js/dist/video-js.css";
export default {
  name: "technical",
  data() {
    return {
      moment,
      urlList: "",
      labelCol: { span: 5 },
      wrapperCol: { span: 15 },
      fileList: [],
      uploading: false,
      addPop: false,
      videoUrl: "",
      formUp: {
        name: "zhangsan",
        typeId: "",
        title: "",
        content: "",
        isVideo: false,
      },
      typeList: [],
      detail: {},
      detailPop: false,
      title: "",
      //最熱資源條數
      size: 10,
      hotdata: [],
      newDataV: [],
      newDataI: [],
      videosList: [],
      imgsList: [],
      filesList: [],
    };
  },
  methods: {
    //打开视频
    videoImg(item) {
      this.videoUrl = item.fileUrl;
      // console.log(this.videoUrl);
      let options = {
        controls: true, // 是否显示底部控制栏
        preload: "auto", // 加载<video>标签后是否加载视频
        autoplay: "muted", // 静音播放
        playbackRates: [0.5, 1, 1.5, 2], // 倍速播放
        width: "640",
        height: "247",
        controlBar: {
          // 自定义按钮的位置
          children: [
            {
              name: "playToggle",
            },
            {
              name: "progressControl",
            },
            {
              name: "currentTimeDisplay",
            },
            {
              name: "timeDivider",
            },
            {
              name: "durationDisplay",
            },

            {
              name: "volumePanel", // 音量调整方式横线条变为竖线条
              inline: false,
            },
            {
              name: "pictureInPictureToggle", //画中画播放模式
            },
            {
              name: "fullscreenToggle",
            },
          ],
        },
      };
      this.player = videojs(
        this.$refs.videoPlayer,
        options,
        function onPlayerReady() {
          // console.log("onPlayerReady", this);
        }
      );
      // console.log(this.player);
      this.player.src({
        src: this.videoUrl,
      });
      var CloseButton = videojs.getComponent("CloseButton");
      CloseButton.prototype.handleClick = () => this.closeVideo();
      var closeButton = new CloseButton(this.player);
      this.player.addChild(closeButton);
      document.getElementById("operator").style.display = "block";
    },
    //关闭播放框
    closeVideo() {
      document.getElementById("operator").style.display = "none";
      this.player.pause();
    },
    //查看详情
    getDetail(item) {
      this.detailPop = true;
      // console.log(item.id);
      this.$api.getDetail(item.id).then((res) => {
        this.detail = res.data.data;
        console.log(this.detail);
        this.detail.technicalFileListPos.forEach((item) => {
          if (item.fileType == "video") {
            this.videosList.push(item);
          }
          if (item.fileType == "img") {
            this.imgsList.push(item);
          }
          if (item.fileType == "unknown") {
            this.filesList.push(item);
          }
        });
        this.title = res.data.data.title;
        this.detail.releaseTime = moment(res.data.data.releaseTime).format(
          "YYYY/MM/DD "
        );
      });
    },
    //关闭详情
    delLisst() {
      this.getNewDataV();
      this.getNewDataI();
      this.imgsList = [];
      this.filesList = [];
      this.videosList = [];
    },

    //跳转更多页面
    lookMore() {
      this.$router.push({
        path: "/knowledge/technical/more",
        query: {
          isVideo: false,
        },
      });
    },
    lookMoreV() {
      this.$router.push({
        path: "/knowledge/technical/more",
        query: {
          isVideo: true,
        },
      });
    },
    //分类查询
    getType() {
      this.$api.findType().then((res) => {
        this.typeList = res.data.data;
      });
    },
    //最新视频
    getNewDataI() {
      let page = {
        currentPage: 1,
        pageSize: 8,
        isVideo: false,
      };
      this.$api.getNewData(page).then((res) => {
        this.newDataI = res.data.data.records;
        this.newDataI.forEach((item) => {
          item.releaseTime = moment(item.releaseTime).format("YYYY/MM/DD ");
          let type = item.fileUrl.substring(item.fileUrl.lastIndexOf(".") + 1);
          if (type == "PDF") {
            item.fileUrl = require("@/assets/pdf.png");
          } else if (type == "jpg") {
            item.fileUrl = require("@/assets/jpg.png");
          } else if (type == "DOC") {
            item.fileUrl = require("@/assets/doc.png");
          } else if (type == "GIF") {
            item.fileUrl = require("@/assets/gif.png");
          } else if (type == "MP4") {
            item.fileUrl = require("@/assets/mp4.png");
          } else if (type == "PPT") {
            item.fileUrl = require("@/assets/ppt.png");
          } else if (type == "RAR") {
            item.fileUrl = require("@/assets/rar.png");
          } else if (type == "XLS") {
            item.fileUrl = require("@/assets/xls.png");
          } else if (type == "png") {
            item.fileUrl = require("@/assets/png.png");
          } else {
            item.fileUrl = require("@/assets/xls.png");
          }
          // if (item.fileType !== "img") {
          //   item.fileUrl = require("@/assets/烟气视频.png");
          // }
        });
      });
    },
    //最新视频
    getNewDataV() {
      let page = {
        currentPage: 1,
        pageSize: 4,
        isVideo: true,
      };
      this.$api.getNewData(page).then((res) => {
        this.newDataV = res.data.data.records;
        this.newDataV.forEach((item) => {
          item.releaseTime = moment(item.releaseTime).format("YYYY/MM/DD ");
          console.log(item.fileType);
          let type = item.fileUrl.substring(item.fileUrl.lastIndexOf(".") + 1);
          if (type == "PDF") {
            item.fileUrl = require("@/assets/pdf.png");
          } else if (type == "jpg") {
            item.fileUrl = require("@/assets/jpg.png");
          } else if (type == "DOC") {
            item.fileUrl = require("@/assets/doc.png");
          } else if (type == "GIF") {
            item.fileUrl = require("@/assets/gif.png");
          } else if (type == "mp4") {
            item.fileUrl = require("@/assets/mp4.png");
          } else if (type == "PPT") {
            item.fileUrl = require("@/assets/ppt.png");
          } else if (type == "RAR") {
            item.fileUrl = require("@/assets/rar.png");
          } else if (type == "XLS") {
            item.fileUrl = require("@/assets/xls.png");
          } else if (type == "png") {
            item.fileUrl = require("@/assets/png.png");
          } else {
            item.fileUrl = require("@/assets/xls.png");
          }
        });
      });
    },
    //最熱資源
    getHot() {
      this.$api.getHotDetail(this.size).then((res) => {
        this.hotdata = res.data.data.records;
      });
    },
  },
  mounted() {
    this.getHot();
    this.getNewDataV();
    this.getNewDataI();
    this.getType();
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  },
};
</script>

<style lang="scss" scoped>
.infoDown {
  display: flex;
  width: 100%;
  justify-content: space-between;
  span {
    color: #000;
    .ddicon {
      color: #000;
      margin: 0 5px;
    }
  }
}
.infoDown:hover {
  background: #bebebe38;
  span {
    color: #1890ff;
    .ddicon {
      color: #1890ff;
    }
  }
}
.video_box {
  position: absolute;
  z-index: 9999;
  height: 450px;
  left: 11%;
  top: 15%;
}
.video-js {
  height: 450px;
  width: 1000px;
}
.up-box {
  width: 80%;
  height: 100%;
  div {
    width: 100%;
    margin: 0 5px;
    display: flex;
    flex-wrap: wrap;
    img {
      margin: 5px 10px;
      width: 100px;
      height: 80px;
    }
  }
}
.chooseFile {
  background: #207064;
  border: 1px solid #207064;
  .upIcon {
    color: black;
  }
}
.chooseFile:hover {
  background: #207064;
  border: 1px solid #207064;
}
.ZYF-technical {
  width: 100%;
  height: 100%;
  padding: 1%;
  box-sizing: border-box;
}
.technical-top {
  width: 100%;
  height: 6%;
  display: flex;
  justify-content: space-between;
}
.from-label {
  color: #9fb043;
  margin-right: 10px;
}
.technical-bottom {
  width: 100%;
  height: 92%;
  display: flex;
  justify-content: space-between;
}
.video-box__left {
  width: 70%;
  height: 100%;
}
.article-list__box {
  width: 100%;
  height: 70%;
}
.article-title {
  background: #deefff;
  padding: 0 12px;
  display: flex;
  justify-content: space-between;
}
.border-text {
  font-weight: 600;
}
.article-father {
  width: 100%;
  height: 90%;
  margin-top: 1%;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
.acticle-child {
  width: 24%;
  margin: 5px;
  height: 48%;
}
.img-box {
  width: 100%;
  height: 150px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img-box img {
  width: auto;
  height: auto;
  // height: auto;
  max-width: 100%;
  max-height: 100%;
}
.resources-title {
  width: 100%;
  line-height: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.8);
  padding: 0 10px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  bottom: 0;
  left: 0;
}
.resources-bottom {
  font-size: 14px;
  padding: 4px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}

.list-box__right {
  width: 26%;
  height: 100%;
}
.ul-class {
  width: 100%;
  height: 95%;
  border: 1px solid #258cd7;
  margin-top: 14px;
  padding: 16px;
  box-sizing: border-box;
}
.li-child {
  width: 100%;
  border-bottom: 1px dashed #deefff;
  padding: 20px 0;
  box-sizing: border-box;
  display: flex;
  cursor: pointer;
  span {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.li-child:last-child {
  border-bottom: 0;
}
.tubiao {
  width: 16px;
  height: 16px;
  line-height: 16px;
  background-color: #deefff;
  text-align: center;
  position: relative;
}
.tubiao::after {
  content: "";
  width: 0;
  height: 0;
  border-width: 8px 0 8px 8px;
  border-style: solid;
  border-color: transparent #deefff transparent;
  position: absolute;
  left: 0;
  bottom: -8px;
}
.tubiao::before {
  content: "";
  width: 0;
  height: 0;
  border-width: 8px 8px 8px 0;
  border-style: solid;
  border-color: transparent #deefff transparent;
  position: absolute;
  right: 0;
  bottom: -8px;
}
.li-child span {
  padding: 0 12px;
}
::v-deep .ant-upload-list-item-name {
  color: rgba(255, 255, 255, 0.7);
}
::v-deep .ant-upload-list-item:hover {
  background: rgba(163, 159, 159, 0.253);
}
::v-deep .ant-upload-list-item:hover .ant-upload-list-item-info {
  background: transparent;
}
::v-deep .anticon-paper-clip {
  color: rgba(255, 255, 255, 0.7);
}
::v-deep .ant-upload-list-item-card-actions .anticon {
  color: rgba(255, 255, 255, 0.7);
}
::v-deep.ZYF-technical .ant-btn {
  width: 100%;
  height: 10%;
  margin-top: 50px;
  font-size: 30px;
  font-weight: 600;
  background-color: #2c6a60;
  border: 1px solid #2c6a60;
  border-radius: 8px;
  display: inline-block;
}
</style>
